<style>
    .flex {
      display: flex;
    }
    .justify-center {
      justify-content: center;
    }
    .align-center {
      align-items: center;
    }
    .pr-2 {
      padding-right: 2px;
    }
    .pd-5 {
      padding: 5px;
    }
    .pd-4 {
      padding: 4px;
    }
    .pd-3 {
      padding: 3px;
    }
    .pd-2 {
      padding: 2px;
    }
    .pd-1 {
      padding: 1px;
    }
    .flex-column {
      flex-direction: column;
    }
    .border-bottom {
      border-bottom: 1px solid #ccc;
    }
    .fixed {
      position: fixed;
      bottom: 100px;
      right: 100px;
    }
    .w-50 {
      width: 50px;
    }
    .w-60 {
      width: 60px;
    }
    .w-70 {
      width: 70px;
    }
    .w-80 {
      width: 80px;
    }
    .w-100 {
      width: 100px;
    }
    .h-100 {
      height: 100px;
    }
    .border-circle {
      border-radius: 50%;
    }
    .text-center {
      text-align: center;
    }
    .font-size-16 {
      font-size: 16px;
    }
    .font-size-12 {
      font-size: 12px;
    }
    .bold {
      font-weight: bold;
    }
    .color-brown {
      color: brown;
    }
  </style>
  <div id="app">
    <div>
      <div
        v-for="mobile in mobiles"
        :key="mobile.mobile"
        class="flex border-bottom pr-2"
      >
        <div class="flex flex-column justify-center pr-2 font-size-12">
          <div>
            <span>{{mobile.mobile}}</span>
          </div>
          <div class="text-center color-brown pd-5">
            <span>{{mobile.money||0}}</span>
          </div>
        </div>
        <div
          v-for="app in apps"
          :key="app.appName"
          class="flex flex-column justify-center pr-2"
        >
          <div class="text-center border-bottom">
            <span class="font-size-16 bold">{{app.appName}}</span>
          </div>
          <div
            v-for="action in app.actions"
            :key="action.actionName"
            class="pd-1"
          >
            <div class="flex justify-center">
              <span class="w-60 text-center font-size-12 bold">
                {{action.actionName}}</span
              >
              <input
                v-if="action.type=='checkbox'"
                type="checkbox"
                v-model="mobile['appValues'][app.appName +'_'+ action.actionName]"
                @change="sum"
              />
              <input
                type="text"
                v-else
                class="w-50"
                v-model="mobile['appValues'][app.appName +'_'+ action.actionName]"
                @input="sum"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="fixed pd-5 color-brown"
      style="border: 1px solid #ccc; border-radius: 5px"
    >
      <div>
        <div class="flex justify-center pd-5">
          <span>今日赚钱：</span>
          <span>{{total}}</span>
        </div>
        <div class="flex justify-center pd-5">
          <span>app数量：</span>
          <span> {{apps.length}} </span>
        </div>
      </div>
      <div>
        <button class="w-100 h-100 border-circle" @click="save">save</button>
        <button class="w-100 h-100 border-circle" @click="sum">sum</button>
      </div>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const DAY = "2024-03-23";
    const MOBILES_KEY = DAY + "activity_mobiles";
    const APPS_KEY = DAY + "activity_apps";
    new Vue({
      el: "#app",
      computed: {
        total() {
          let sum = 0;
          this.mobiles.forEach((item) => {
            sum += Number(item.money || 0);
          });
          return sum.toFixed(2);
        },
      },
      data: {
        mobiles: [
          {
            mobile: "18762750392",
            appValues: {},
          },
          {
            mobile: "13193037083",
            appValues: {},
          },
          {
            mobile: "17764297074",
            appValues: {},
          },
          {
            mobile: "14751017521",
            appValues: {},
          },
          {
            mobile: "19858302953",
            appValues: {},
          },
          {
            mobile: "18042059337",
            appValues: {},
          },
        ],
        apps: [
          {
            appName: "番茄小说",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "抽奖", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "番茄畅听",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "抽奖", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "番茄音乐",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "抽奖", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "今日头条",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "走路赚钱", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "闪电搜索",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "走路赚钱", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "有柿",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "走路赚钱", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "头条搜索",
            goldRate: 33000,
            actions: [
              { actionName: "新人福利", value: false, type: "checkbox" },
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "早餐", value: false, type: "checkbox" },
              { actionName: "午餐", value: false, type: "checkbox" },
              { actionName: "晚餐", value: false, type: "checkbox" },
              { actionName: "夜宵", value: false, type: "checkbox" },
              { actionName: "我睡醒了", value: false, type: "checkbox" },
              { actionName: "我要睡了", value: false, type: "checkbox" },
              { actionName: "走路赚钱", value: false, type: "checkbox" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "西瓜视频",
            goldRate: 33000,
            actions: [
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "抖音极速",
            goldRate: 10000,
            actions: [
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "抖音",
            goldRate: 10000,
            actions: [
              { actionName: "签到", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "快手极速",
            goldRate: 10000,
            actions: [
              { actionName: "立即领取", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "百度极速",
            goldRate: 10000,
            actions: [
              { actionName: "看广告", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
          {
            appName: "百度畅听",
            goldRate: 10000,
            actions: [
              { actionName: "看广告", value: false, type: "checkbox" },
              { actionName: "开宝箱", value: null, type: "number" },
              { actionName: "今日金币", value: null, type: "number" },
            ],
          },
        ],
      },
      mounted() {
        this.apps.forEach((app) => {
          app.actions.forEach((action) => {
            this.mobiles.forEach((mobile) => {
              let initialValue = action.type == "checkbox" ? false : "";
              this.$set(
                mobile.appValues,
                app.appName + "_" + action.actionName,
                initialValue
              );
            });
          });
        });
        let mobiles = this.localStorageGetItem(MOBILES_KEY);
        let apps = this.localStorageGetItem(APPS_KEY);
        if (mobiles) {
          this.mobiles = mobiles;
        }
        if (apps) {
          this.apps = apps;
        }
      },
      methods: {
        save() {
          localStorage.setItem(MOBILES_KEY, JSON.stringify(this.mobiles));
          localStorage.setItem(APPS_KEY, JSON.stringify(this.apps));
        },
        sum() {
          this.mobiles.forEach((mobile) => {
            let sum = 0;
            let appValues = mobile.appValues;
            let keys = Object.keys(appValues);
            keys.forEach((key) => {
              var [appName, actionName] = key.split("_");
              var app = this.apps.find((i) => i.appName == appName);
              var action = app.actions.find((i) => i.actionName == actionName);
              var isGold = actionName == "今日金币";
              if (isGold) {
                var goldRate = app.goldRate;
                sum += Number(appValues[key] || 0) / Number(goldRate);
              }
            });
            this.$set(mobile, "money", sum.toFixed(2));
          });
        },
        localStorageGetItem(key) {
          try {
            return JSON.parse(localStorage.getItem(key));
          } catch (e) {
            return null;
          }
        },
      },
    });
  </script>
  